<template>
  <div class="modifyGlobalRule common-container">
    <div class="common-top">
      <span class="left">
        <span class="go-back" @click.stop="$router.go(-1)">返回</span>
      </span>
      <el-button type="primary" @click="save">保存</el-button>
    </div>
    <el-form ref="form" :model="form">
      <el-card class="box-card" style="margin-top: 10px">
        <div slot="header" class="clearfix">
          <span>全局配置名称</span>
        </div>
        <el-input v-model="form.name"></el-input>
      </el-card>
      <el-card style="margin-top: 10px" class="box-card" v-for="(item, index) in fieldsList" :key="index">
        <div slot="header" class="clearfix">
          <span>{{ item.fieldName }}</span>
        </div>
        <el-form-item
          v-for="(fItem, fIndex) in item.fieldsList"
          :key="fIndex"
          required
          :label="fItem.detail">
          <el-input v-if="fItem.onOff" v-model="fItem.def.value">
            <template slot="prepend">
              是否启用：<el-switch v-model="fItem.def.enable"></el-switch>
            </template>
          </el-input>
          <template v-else>
            <el-switch v-if="fItem.type === 'boolean'" v-model="fItem.def"></el-switch>
            <el-input v-else-if="fItem.type === 'int'" v-model="fItem.def" type="number"></el-input>
            <el-input v-else v-model="fItem.def"></el-input>
          </template>
        </el-form-item>
      </el-card>
    </el-form>
  </div>
</template>
<script>
import ManaApi from "@/api/";
export default {
  name: "ModifyGlobalRule",
  data() {
    return {
      disciplineOptions: [],
      fieldsList: [],
      form: {
        formId: 0,
        name: "",
        enable: true,
      },
    };
  },
  methods: {
    getInfo() {
      ManaApi.global
        .detail({
          targetId: this.$route.query.id,
        })
        .then((res) => {
          this.form = {
            formId: res.data.id,
            name: res.data.name,
            enable: res.data.enable,
          };
          for (let i = 0; i < this.fieldsList.length; i++) {
            for (let j = 0; j < this.fieldsList[i].fieldsList.length; j++) {
              for (let k in res.data.setting) {
                if (k == this.fieldsList[i].fieldsList[j].key) {
                  this.fieldsList[i].fieldsList[j].def = res.data.setting[k];
                }
              }
            }
          }
        });
    },
    checkInfo() {
      if (String(this.form.name).trim() == "") {
        this.$message({
          type: "error",
          message: "请填写名称",
        });
        return false;
      }
      return true;
    },
    getDiscipline() {
      ManaApi.classMana.disciplineList({ all: true }).then((res) => {
        let data = [];
        res.data.forEach((element) => {
          element.children = null;
          data.push(element);
        });
        this.disciplineOptions = data;
      });
    },
    save() {
      if (!this.checkInfo()) {
        return;
      }
      let form = JSON.parse(JSON.stringify(this.form));
      form.setting = {};
      for (let i = 0; i < this.fieldsList.length; i++) {
        for (let j = 0; j < this.fieldsList[i].fieldsList.length; j++) {
          form.setting[this.fieldsList[i].fieldsList[j].key] = this.fieldsList[
            i
          ].fieldsList[j].def;
        }
      }
      ManaApi.global
        .edit(form)
        .then((res) => {
          if (res.code == 200) {
            this.$router.go(-1);
          }
        })
        .catch((err) => {});
    },
    getFileds() {
      return new Promise((resolve, reject) => {
        ManaApi.global
          .fieldsList({})
          .then((res) => {
            let settingObj = {};
            res.data.forEach((item) => {
              settingObj[item.group] = {
                fieldName: item.group,
                fieldsList: [],
              };
            });
            for (let k in settingObj) {
              res.data.forEach((item) => {
                if (item.group == k) {
                  if (item.onOff) {
                    item.def = {
                      enable: true,
                      value: "",
                    };
                  }
                  settingObj[k].fieldsList.push(item);
                }
              });
            }
            let fieldsList = [];
            for (let k in settingObj) {
              fieldsList.push(settingObj[k]);
            }
            console.log(fieldsList);
            this.fieldsList = fieldsList;
            resolve();
          })
          .catch((err) => {
            reject();
          });
      });
    },
  },
  async mounted() {
    await this.getFileds();
    if (this.$route.query.type == "edit") {
      this.getInfo();
    }
  },
};
</script>
<style scoped lang="scss">
.modifyGlobalRule {
  .modify-bot {
    width: 70%;
    padding: 30px 10px;
  }
}
</style>
